<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>鲜时蔬 - 联系我们</title>
    <!-- 核心依赖 -->
    <!--引入的vue.js-->
    <script src="../../js/vue.js"></script>
    <!--引入elementUI的css-->
    <link  type="text/css" rel="stylesheet" href="../../css/index.css">
    <!--引入elementUI的js-->
    <script src="../../js/index.js"></script>
    <!--引入axios.js-->
    <script src="../../js/axios.min.js"></script>
    <!-- 基础样式 -->
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; background-color: #f5f5f5; color: #333; }
        .container { width: 1140px; margin: 0 auto; padding: 0 15px; }
        @media (max-width: 1199px) { .container { width: 960px; } }
        @media (max-width: 991px) { .container { width: 720px; } }
        @media (max-width: 767px) { .container { width: 100%; } }

        /* 导航栏 */
        .header { background: #fff; box-shadow: 0 2px 4px rgba(0,0,0,0.1); position: fixed; top: 0; left: 0; right: 0; z-index: 1000; }
        .header-content { display: flex; justify-content: space-between; align-items: center; padding: 15px 0; }
        .logo { display: flex; align-items: center; font-size: 20px; font-weight: bold; color: #27ae60; text-decoration: none; }
        .logo i { margin-right: 8px; }
        .nav { display: flex; }
        .nav a { margin: 0 15px; text-decoration: none; color: #666; font-size: 14px; padding: 5px 0; }
        .nav a.active { color: #27ae60; border-bottom: 2px solid #27ae60; }
        .user-actions { display: flex; align-items: center; }
        .user-actions button { margin-left: 15px; background: none; border: none; color: #666; cursor: pointer; font-size: 14px; display: flex; align-items: center; }
        .user-actions button i { margin-right: 5px; }

        /* 主内容区 */
        .main { padding-top: 80px; padding-bottom: 50px; }

        /* 面包屑 */
        .breadcrumb { margin-bottom: 20px; }

        /* 联系内容 */
        .contact-content { display: flex; gap: 30px; background: #fff; border-radius: 4px; box-shadow: 0 2px 12px rgba(0,0,0,0.1); padding: 30px; }
        @media (max-width: 767px) { .contact-content { flex-direction: column; } }
        .contact-info { flex: 1; min-width: 300px; }
        .contact-form { flex: 1; min-width: 300px; }
        .section-title { font-size: 20px; margin-bottom: 25px; color: #333; padding-bottom: 10px; border-bottom: 2px solid #27ae60; display: inline-block; }

        /* 联系信息项 */
        .info-item { margin-bottom: 25px; display: flex; align-items: flex-start; }
        .info-item i { font-size: 20px; color: #27ae60; margin-right: 15px; margin-top: 3px; }
        .info-text h3 { margin: 0 0 8px; font-size: 16px; color: #333; }
        .info-text p { margin: 0; font-size: 14px; color: #666; }

        /* 社交链接 */
        .social-links { margin-top: 30px; }
        .social-links button { margin-right: 15px; width: 36px; height: 36px; border-radius: 50%; border: 1px solid #27ae60; background: #fff; color: #27ae60; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }

        /* 表单样式 */
        .form-item { margin-bottom: 20px; }
        .form-button { width: 100%; padding: 12px 0; font-size: 16px; }

        /* 地图区域 */
        .map-section { margin-top: 30px; background: #fff; border-radius: 4px; box-shadow: 0 2px 12px rgba(0,0,0,0.1); padding: 30px; }
        .map-container { width: 100%; height: 400px; background: #f9f9f9; border-radius: 4px; display: flex; align-items: center; justify-content: center; color: #999; }

        /* 页脚 */
        .footer { background: #333; color: #fff; padding: 30px 0; margin-top: 50px; }
        .footer-content { text-align: center; font-size: 14px; }

        /* 回到顶部 */
        .back-to-top { position: fixed; bottom: 30px; right: 30px; width: 40px; height: 40px; border-radius: 50%; background: #27ae60; color: #fff; border: none; cursor: pointer; display: none; align-items: center; justify-content: center; box-shadow: 0 2px 8px rgba(0,0,0,0.15); z-index: 999; }
        .back-to-top.show { display: flex; }
        /* 用户信息下拉菜单 */
        .user-info { position: relative; display: flex; align-items: center; cursor: pointer; }
        .user-avatar { width: 32px; height: 32px; border-radius: 50%; background-color: #27ae60; color: white; display: flex; align-items: center; justify-content: center; margin-right: 8px; font-size: 14px; }
        .user-dropdown { position: absolute; top: 100%; right: 0; background: white; box-shadow: 0 2px 12px rgba(0,0,0,0.1); border-radius: 4px; padding: 5px 0; min-width: 120px; z-index: 10; margin-top: 5px; display: none; }
        .user-dropdown.show { display: block; }
        .user-dropdown-item { padding: 8px 15px; font-size: 14px; color: #606266; cursor: pointer; }
        .user-dropdown-item:hover { background-color: #f5f7fa; color: #27ae60; }
    </style>
</head>
<body>
<div id="app">
    <!-- 导航栏 -->
    <header class="header">
        <div class="container">
            <div class="header-content">
                <a href="index.html" class="logo">
                    <i class="el-icon-shopping-bag"></i>
                    <span>鲜时蔬</span>
                </a>
                <nav class="nav">
                    <a href="index.html">首页</a>
                    <a href="vegetables.html">蔬菜列表</a>
                    <a href="contact.html" class="active">联系我们</a>
                </nav>
                <div class="user-actions">
                    <!-- 根据登录状态显示不同内容 -->
                    <template v-if="isLoggedIn">
                        <div class="user-info" @mouseenter="showDropdown = true" @mouseleave="showDropdown = false">
                            <div class="user-avatar">
                                {{ loggedInUser.nickName ? loggedInUser.nickName.charAt(0) : loggedInUser.userName.charAt(0) }}
                            </div>
                            <span>{{ loggedInUser.nickName || loggedInUser.userName }}</span>
                            <div class="user-dropdown" :class="{ 'show': showDropdown }">
                                <div class="user-dropdown-item" @click="goToPersonalCenter">个人中心</div>
                                <div class="user-dropdown-item" @click="logout">退出登录</div>
                            </div>
                        </div>
                    </template>
                    <template v-else>
                        <button @click="goToLogin">
                            <i class="el-icon-user"></i> 登录
                        </button>
                    </template>
                </div>
            </div>
        </div>
    </header>

    <!-- 主内容区 -->
    <main class="main">
        <div class="container">
            <!-- 面包屑 -->
            <div class="breadcrumb">
                <el-breadcrumb separator="/">
                    <el-breadcrumb-item><a href="index.html">首页</a></el-breadcrumb-item>
                    <el-breadcrumb-item>联系我们</el-breadcrumb-item>
                </el-breadcrumb>
            </div>

            <!-- 联系内容 -->
            <div class="contact-content">
                <!-- 左侧：咨询表单 -->
                <div class="contact-form">
                    <h2 class="section-title">发送咨询</h2>
                    <el-form
                            ref="contactForm"
                            :model="form"
                            :rules="formRules"
                            label-width="100px"
                            class="contact-form"
                    >
                        <el-form-item label="您的姓名" prop="name" class="form-item">
                            <el-input
                                    v-model="form.name"
                                    placeholder="请输入姓名"
                                    maxlength="20"
                                    readonly
                            ></el-input>
                        </el-form-item>

                        <el-form-item label="联系电话" prop="phone" class="form-item">
                            <el-input
                                    v-model="form.phone"
                                    placeholder="请输入手机号"
                                    maxlength="11"
                                    readonly
                            ></el-input>
                        </el-form-item>

                        <el-form-item label="电子邮箱" prop="email" class="form-item">
                            <el-input
                                    v-model="form.email"
                                    placeholder="请输入邮箱"
                                    maxlength="50"
                                    readonly
                            ></el-input>
                        </el-form-item>

                        <el-form-item label="咨询类型" prop="type" class="form-item">
                            <el-select
                                    v-model="form.type"
                                    placeholder="请选择类型"
                            >
                                <el-option label="订单问题" value="0"></el-option>
                                <el-option label="产品咨询" value="1"></el-option>
                                <el-option label="配送问题" value="2"></el-option>
                                <el-option label="投诉建议" value="3"></el-option>
                                <el-option label="其他问题" value="4"></el-option>
                            </el-select>
                        </el-form-item>

                        <el-form-item label="咨询内容" prop="content" class="form-item">
                            <el-input
                                    v-model="form.content"
                                    type="textarea"
                                    placeholder="请描述您的问题"
                                    rows="5"
                                    maxlength="500"
                            ></el-input>
                        </el-form-item>

                        <el-form-item class="form-item">
                            <el-button
                                    type="primary"
                                    @click="submitForm"
                                    :loading="submitting"
                                    class="form-button"
                            >
                                提交咨询
                            </el-button>
                        </el-form-item>
                    </el-form>
                </div>
                <!-- 右侧：咨询表单 -->
                <!-- 右侧：历史咨询及回复 -->
                <div class="contact-history">
                    <h2 class="section-title">我的咨询记录</h2>
                    <!-- 历史咨询列表 -->
                    <el-table
                            :data="historyList"
                            border
                            stripe
                            style="width: 100%; margin-bottom: 20px;"
                    >
                        <el-table-column prop="createTime" label="提交时间" width="180"></el-table-column>
                        <el-table-column prop="type" label="咨询类型" width="120">
                            <template slot-scope="scope">
                                <span>{{ getTypeName(scope.row.type) }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="status" label="状态" width="100" align="center">
                            <template slot-scope="scope">
                                <el-tag v-if="scope.row.status === 0" type="warning">未回复</el-tag>
                                <el-tag v-else type="success">已回复</el-tag>
                            </template>
                        </el-table-column>
                        <el-table-column label="操作" width="120" align="center">
                            <template slot-scope="scope">
                                <el-button type="text" @click="viewHistoryDetail(scope.row)">查看</el-button>
                            </template>
                        </el-table-column>
                    </el-table>

                    <!-- 咨询详情弹窗（查看历史咨询时显示） -->
                    <el-dialog
                            title="咨询详情"
                            :visible.sync="historyDetailVisible"
                            width="60%"
                            :close-on-click-modal="false"
                    >
                        <div v-if="currentHistory">
                            <p><span class="detail-label">咨询类型：</span>{{ getTypeName(currentHistory.type) }}</p>
                            <p><span class="detail-label">提交时间：</span>{{ currentHistory.createTime }}</p>
                            <p><span class="detail-label">咨询内容：</span></p>
                            <p style="margin-top: 5px; line-height: 1.6; padding: 10px; background: #f5f5f5; border-radius: 4px;">
                                {{ currentHistory.content }}
                            </p>
                            <p v-if="currentHistory.status === 1">
                                <span class="detail-label">回复时间：</span>{{ currentHistory.replyTime }}
                            </p>
                            <p v-if="currentHistory.status === 1">
                                <span class="detail-label">回复内容：</span>
                            </p>
                            <p v-if="currentHistory.status === 1" style="margin-top: 5px; line-height: 1.6; padding: 10px; background: #f0f9eb; border-radius: 4px; border-left: 3px solid #52c41a;">
                                {{ currentHistory.replyContent }}
                            </p>
                        </div>
                        <div slot="footer" class="dialog-footer">
                            <el-button @click="historyDetailVisible = false">关闭</el-button>
                        </div>
                    </el-dialog>
                </div>
            </div>

            <!-- 地图区域 -->
            <div class="map-section">
                <h2 class="section-title">我们的位置</h2>
                <div class="map-container">
                    <div>
                        <i class="el-icon-location-outline" style="font-size: 40px; margin-bottom: 10px;"></i>
                        <p>地图加载中...（实际项目中嵌入地图SDK）</p>
                    </div>
                </div>
            </div>
        </div>
    </main>

    <!-- 页脚 -->
    <footer class="footer">
        <div class="container">
            <div class="footer-content">
                <p>© 2025 鲜时蔬 版权所有 | 京ICP备12345678号</p>
            </div>
        </div>
    </footer>

    <!-- 回到顶部按钮 -->
    <button
            class="back-to-top"
            :class="{ 'show': scrollY > 500 }"
            @click="scrollToTop"
    >
        <i class="el-icon-arrow-up"></i>
    </button>
</div>

<script>
    new Vue({
        el: '#app',
        data() {
            return {
                scrollY: 0,
                // 表单数据
                form: {
                    name: '',
                    phone: '',
                    email: '',
                    type: '',
                    content: ''
                },
                // 表单验证规则
                formRules: {
                    name: [
                        { required: true, message: '请输入姓名', trigger: 'blur' },
                        { min: 2, max: 20, message: '姓名长度2-20字符', trigger: 'blur' }
                    ],
                    phone: [
                        { required: true, message: '请输入手机号', trigger: 'blur' },
                        { pattern: /^1[3-9]\d{9}$/, message: '手机号格式错误', trigger: 'blur' }
                    ],
                    email: [
                        { required: true, message: '请输入邮箱', trigger: 'blur' },
                        { type: 'email', message: '邮箱格式错误', trigger: 'blur' }
                    ],
                    type: [
                        { required: true, message: '请选择咨询类型', trigger: 'change' }
                    ],
                    content: [
                        { required: true, message: '请输入咨询内容', trigger: 'blur' },
                        { min: 10, max: 500, message: '内容长度10-500字符', trigger: 'blur' }
                    ]
                },
                submitting: false,
                // 标记用户是否登录
                isLoggedIn: false,
                // 存储登录用户信息
                loggedInUser: {},
                showDropdown: false, // 控制下拉菜单显示
                historyList: [], // 历史咨询列表
                // 当前查看的历史咨询详情
                currentHistory: {},
                // 历史咨询详情弹窗显隐
                historyDetailVisible: false
            }
        },
        mounted() {
            window.addEventListener('scroll', () => {
                this.scrollY = window.scrollY;
            });
            // 检查登录状态并填充用户信息
            this.checkLoginStatus();
            // 获取历史咨询记录
            this.getHistoryList();
        },
        beforeDestroy() {
            window.removeEventListener('scroll', () => {
                this.scrollY = window.scrollY;
            });
        },
        methods: {
            scrollToTop() {
                window.scrollTo({ top: 0, behavior: 'smooth' });
            },
            goToLogin() {
                window.location.href = 'login.html';
            },
            submitForm() {
                this.$refs.contactForm.validate((isValid) => {
                    if (isValid) {
                        this.submitting = true;
                        // 【接口提示】对接后端：POST /api/contact/submit
                        axios.post('/vegetablemarketexpress/contact/submit', this.form)
                            .then(response => {
                                this.submitting = false;
                                this.$message.success('咨询提交成功！我们将尽快联系您');
                                this.$refs.contactForm.resetFields();
                            })
                            .catch(error => {
                                this.submitting = false;
                                this.$message.error('提交失败，请稍后重试');
                            });
                    }
                });
            },
            checkLoginStatus() {
                axios.get('/vegetablemarketexpress/user/checkLoginStatus')
                    .then(response => {
                        // 用户已登录
                        this.isLoggedIn = true;
                        this.loggedInUser = response.data.data;
                        // 自动填充表单
                        this.form.name = this.loggedInUser.userName;
                        this.form.phone = this.loggedInUser.phonenumber;
                        this.form.email = this.loggedInUser.email;
                    })
                    .catch(error => {
                        // 用户未登录，不做处理
                        this.isLoggedIn = false;
                        console.log('用户未登录或登录状态检查失败', error);
                    });
            },
            // 跳转到个人中心
            goToPersonalCenter() {
                this.$message.info('即将跳转到个人中心');
                window.location.href = '/vegetablemarketexpress/html/front/personalCenter.html';
            },
            // 退出登录
            logout() {
                axios.get('/vegetablemarketexpress/user/logout', { withCredentials: true })
                    .then(response => {
                        if (response.data.code === 200) {
                            this.isLoggedIn = false;
                            this.userInfo = {};
                            this.showDropdown = false;
                            this.$message.success('退出登录成功');
                            setTimeout(() => this.goToLogin(), 1000);
                        } else {
                            this.$message.error('退出登录失败');
                        }
                    })
                    .catch(error => {
                        console.error('退出登录失败:', error);
                        this.$message.error('退出登录失败');
                    });
            },
            getHistoryList() {
                axios.get('/vegetablemarketexpress/contact/history')
                    .then(response => {
                        this.historyList = response.data.data;
                    })
                    .catch(error => {
                        console.error('获取历史咨询失败', error);
                        this.$message.error('获取历史咨询失败');
                    });
            },
            // 查看历史咨询详情
            viewHistoryDetail(row) {
                this.currentHistory = row;
                this.historyDetailVisible = true;
            },
            // 获取咨询类型中文名称
            getTypeName(type) {
                const map = {
                    '0': '订单问题',
                    '1': '产品咨询',
                    '2': '配送问题',
                    '3': '投诉建议',
                    '4': '其他问题'
                };
                return map[type] || type;
            },
        }
    });
</script>
</body>
</html>
